<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>飞镖积分器</title>
    <link rel="stylesheet" type="text/css" href="../../plugins/layui/css/layui.css">


    <style>
        .remainder {
            font-size: 16px;
            font-weight: 600;
            text-align: center;
        }

        .management-input {
            width: 80px;
            height: 32px;
            margin-top: 10px;
            margin-left: 10px;
        }

        .management-button {
            margin-top: 10px;
            margin-left: 10px;
        }

        .block-left {
            border-right: 1px solid #000000;
        }

        .game-in-input {
            width: 80px;
            height: 32px;
            margin-left: 80px;
            margin-top: 10px;
        }

        .game-in-button {
            margin-top: 10px;
            width: 30px;
        }

        .score-history li {
            text-align: center;
            margin-top: 5px;
        }

        .game-in-list {
            border-right: 1px solid #000000;
        }


    </style>
</head>
<body>
<div id="content">
    <div class="layui-fluid" style="margin-top: 10px">
        <div class="layui-row">
            <div class="layui-col-md1 block-left">
                <!--<div class="layui-row">-->
                <!--<div class="layui-col-md12" style="font-size: 20px;padding-top: 5px;padding-left: 10px">参与人数:</div>-->
                <!--</div>-->
                <!--<div class="layui-row">-->
                <!--<div class="layui-col-md12"><input type="number" class="layui-input management-input"-->
                <!--id="numberOfParticipants"></div>-->
                <!--</div>-->
                <div class="layui-row">
                    <div class="layui-col-md12" style="font-size: 20px;padding-top: 5px;padding-left: 10px">目标积分:</div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md12"><input type="number" class="layui-input management-input"
                                                       id="targetScore"></div>
                </div>
                <div class="layui-row management-button">
                    <div class="layui-col-md1">
                        <button class="layui-btn layui-btn-small" onclick="gameStart()">开始计分</button>
                    </div>
                </div>
                <div class="layui-row management-button">
                    <div class="layui-col-md1">
                        <button class="layui-btn layui-btn-normal layui-btn-small" onclick="restart_game()">重置计分
                        </button>
                    </div>
                </div>


            </div>
            <div class="layui-col-md9">
                <div class="layui-row" style="margin-top: 15px">
                    <div class="layui-col-md3 game-in-list">
                        <div class="layui-row">
                            <p class="remainder" id="player_surplus_1">剩余分数:</p>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-md8"><input type="number" class="layui-input game-in-input"
                                                              id="player_input_1"></div>
                            <div class="layui-col-md1">
                                <button class="layui-btn layui-btn-small game-in-button" onclick="add_score(1)">+
                                </button>
                            </div>
                            <div class="layui-col-md3" style="padding-left: 10px">
                                <button class="layui-btn layui-btn-small layui-btn-danger game-in-button"
                                        onclick="del_score(1)">-
                                </button>
                            </div>
                        </div>
                        <div class="layui-row">
                            <p style="font-size: 15px;text-align: center">历史分数</p>
                        </div>
                        <div class="layui-row score-history">
                            <ul id="player_history_1">
                            </ul>
                        </div>

                    </div>
                    <div class="layui-col-md3 game-in-list">
                        <div class="layui-row">
                            <p class="remainder" id="player_surplus_2">剩余分数:</p>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-md8"><input type="number" class="layui-input game-in-input"
                                                              id="player_input_2"></div>
                            <div class="layui-col-md1">
                                <button class="layui-btn layui-btn-small game-in-button" onclick="add_score(2)">+
                                </button>
                            </div>
                            <div class="layui-col-md3" style="padding-left: 10px">
                                <button class="layui-btn layui-btn-small layui-btn-danger game-in-button"
                                        onclick="del_score(2)">-
                                </button>
                            </div>
                        </div>
                        <div class="layui-row">
                            <p style="font-size: 15px;text-align: center">历史分数</p>
                        </div>
                        <div class="layui-row score-history">
                            <ul id="player_history_2">
                            </ul>
                        </div>

                    </div>
                    <div class="layui-col-md3 game-in-list">
                        <div class="layui-row">
                            <p class="remainder" id="player_surplus_3">剩余分数:</p>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-md8"><input type="number" class="layui-input game-in-input"
                                                              id="player_input_3"></div>
                            <div class="layui-col-md1">
                                <button class="layui-btn layui-btn-small game-in-button" onclick="add_score(3)">+
                                </button>
                            </div>
                            <div class="layui-col-md3" style="padding-left: 10px">
                                <button class="layui-btn layui-btn-small layui-btn-danger game-in-button"
                                        onclick="del_score(3)">-
                                </button>
                            </div>
                        </div>
                        <div class="layui-row">
                            <p style="font-size: 15px;text-align: center">历史分数</p>
                        </div>
                        <div class="layui-row score-history">
                            <ul id="player_history_3">
                            </ul>
                        </div>

                    </div>
                    <div class="layui-col-md3"></div>
                </div>

            </div>
            <div class="layui-col-md2">
                <div class="layui-row">
                    <div class="layui-col-md12">积分排行榜</div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md12">
                        <div class="layui-row">
                            <div class="layui-col-md2">名次</div>
                            <div class="layui-col-md6">昵称</div>
                            <div class="layui-col-md4">积分</div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md12">
                        <div class="layui-row">
                            <div class="layui-col-md2">1</div>
                            <div class="layui-col-md6">老司机</div>
                            <div class="layui-col-md4">135</div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md12">
                        <div class="layui-row">
                            <div class="layui-col-md2">2</div>
                            <div class="layui-col-md6">老张</div>
                            <div class="layui-col-md4">125</div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md12">
                        <div class="layui-row">
                            <div class="layui-col-md2">3</div>
                            <div class="layui-col-md6">老李</div>
                            <div class="layui-col-md4">125</div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md12">
                        <div class="layui-row">
                            <div class="layui-col-md2">4</div>
                            <div class="layui-col-md6">老王</div>
                            <div class="layui-col-md4">112</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="../../plugins/layui/layui.js"></script>

<script>
    var gamer_score_1 = 0;
    var gamer_score_2 = 0;
    var gamer_score_3 = 0;
    var gamer_score_4 = 0;

    var targetScore = 0;

    var $player_surplus_1 = $("#player_surplus_1");
    var $player_surplus_2 = $("#player_surplus_2");
    var $player_surplus_3 = $("#player_surplus_3");
    //    var $player_surplus_1=$("#player_surplus_4");

    function gameStart() {
//        let numberOfParticipants = $("#numberOfParticipants").val();
//        if (numberOfParticipants > 4 || numberOfParticipants <= 1) {
//            layui.use('layer', function () {
//                var layer = layui.layer;
//
//                layer.msg('支持玩家数 2-4 人');
//            });
//        }
        targetScore = $("#targetScore").val();
        gamer_score_1 = targetScore;
        gamer_score_2 = targetScore;
        gamer_score_3 = targetScore;
//        gamer_score_4 = targetScore;

        $player_surplus_1.text('剩余分数:' + gamer_score_1);
        $player_surplus_2.text('剩余分数:' + gamer_score_2);
        $player_surplus_3.text('剩余分数:' + gamer_score_3);
//        $player_surplus_4.text('剩余分数:'+gamer_score_1);


    }

    function add_score(player_num) {
        let selected_input = '#player_input_' + player_num;
        let value = $(selected_input).val();
        $(selected_input).val("");
        let selected_history = '#player_history_' + player_num;
        $(selected_history).append(`<li>${value}</li>`);

        if (player_num == 1) {
            gamer_score_1 = gamer_score_1 - value;
            if (gamer_score_1 == 0) {
                layui.use('layer', function () {
                    var layer = layui.layer;
                    layer.open({
                        title: '胜利'
                        , content: '大吉大利，今晚吃鸡！'
                    });
                });
            }
            $player_surplus_1.text('剩余分数:' + gamer_score_1);
        } else if (player_num == 2) {
            gamer_score_2 = gamer_score_2 - value;
            if (gamer_score_2 == 0) {
                layui.use('layer', function () {
                    var layer = layui.layer;
                    layer.open({
                        title: '胜利'
                        , content: '大吉大利，今晚吃鸡！'
                    });
                });
            }
            $player_surplus_2.text('剩余分数:' + gamer_score_2);
        } else if (player_num == 3) {
            gamer_score_3 = gamer_score_3 - value;
            if (gamer_score_3 == 0) {
                layui.use('layer', function () {
                    var layer = layui.layer;
                    layer.open({
                        title: '胜利'
                        , content: '大吉大利，今晚吃鸡！'
                    });
                });
            }
            $player_surplus_3.text('剩余分数:' + gamer_score_3);
        }


    }

    function del_score(player_num) {
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.msg('减号还没做');
        });
    }

    function restart_game() {
        location.reload();
    }
</script>

</body>
</html>
